<template>
    <div class="ysj_wrap">
        <div class="page-content">
            <div class="top-panel">
                <el-radio-group v-model="radio1">
                    <el-radio-button :label="0">20MPa压缩机</el-radio-button>
                    <el-radio-button :label="1">45MPa氢气压缩机</el-radio-button>
                    <el-radio-button :label="2">15MPa氧气压缩机</el-radio-button>
                </el-radio-group>

                <div class="float-right">
                    <span class="panel-sub-title">压缩机已运行</span>
                    <span class="panel-num">{{ valveState[16445] ? parseInt( valveState[16445] / 60 ) : '--' }}</span>
                    <span class="panel-text">时</span>
                    <span class="panel-num">{{ valveState[16445] ? valveState[16445] % 60 : '--' }}</span>
                    <span class="panel-text">分</span>
                </div>
            </div>

            <div class="middle-panel">
                <div class="panel-item">
                    <div class="panel-title">氢气浓度探测（%）</div>
                    <div class="panel-content">
                        <div class="list-item">
                            <span class="list-item-label">卸车柱</span>
                            <!--1-->
                            <span class="list-item-num">{{ valveState[16442] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                            <span class="list-item-label">阀组区</span>
                            <!--4-->
                            <span class="list-item-num">{{ valveState[16445] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                            <span class="list-item-label">1#加氢机</span>
                            <!--2-->
                            <span class="list-item-num">{{ valveState[16443] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                            <span class="list-item-label">储氢瓶</span>
                            <!--5-->
                            <span class="list-item-num">{{ valveState[16442] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                            <span class="list-item-label">压缩机外</span>
                            <!--3-->
                            <span class="list-item-num">{{ valveState[16444] | formatFlowValue }}</span>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">紧急停止被按下</div>
                    <div class="panel-content">
                        <div class="btn-item is_hover" @click="btnClick()">
                            <span class="btn-item-txt">站空柜紧急停止</span>
                            <!--6-->
                            <span :class="`btn-item-icon ${ valveState[27] ? 'is_red' : '' }`"></span>
                        </div>
                        <div class="btn-item is_hover" @click="btnClick()">
                            <span class="btn-item-txt">卸车紧急停止</span>
                            <!--8-->
                            <span :class="`btn-item-icon ${ valveState[29] ? 'is_red' : '' }`"></span>
                        </div>
                        <div class="btn-item is_hover" @click="btnClick()">
                            <span class="btn-item-txt">1#加氢机紧急停止</span>
                            <!--7-->
                            <span :class="`btn-item-icon ${ valveState[28] ? 'is_red' : '' }`"></span>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">火焰报警</div>
                    <div class="panel-content">
                        <div class="alert-box">
                            <div class="alert-item">
                                <span class="alert-item-text">阀组后端</span>
                                <!--9-->
                                <span :class="`alert-item-icon ${ valveState[1]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">储罐后端</span>
                                <!--11-->
                                <span :class="`alert-item-icon ${ valveState[3]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">压缩机后</span>
                                <!--13-->
                                <span :class="`alert-item-icon ${ valveState[5]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">卸气柱后</span>
                                <!--10-->
                                <span :class="`alert-item-icon ${ valveState[2]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">压缩机前</span>
                                <!--12-->
                                <span :class="`alert-item-icon ${ valveState[4]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">1#加氢机</span>
                                <!--14-->
                                <span :class="`alert-item-icon ${ valveState[6]?'is_red': '' }`"></span>
                            </div>
                        </div>
                        <div class="btn-box">
                            <!--15-->
                            <el-button class="hy_btn " type="danger" plain @click="btnClick()" :disabled="!!valveState[1000]">故障复位</el-button>
                            <span></span>
                            <!--16-->
                            <el-button type="danger" @click="btnClick()" :disabled="!!valveState[1000]">紧急停止</el-button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom-panel">
                <div class="flow-chart-box">
                    <div>
                        <span class="flow-label">氢气</span>
                        <span class="flow-label">冲压线阀 PV105</span>
                        <span class="flow-label">入口阀 PV101</span>
                        <span class="flow-label">旁路阀 PV104</span>
                        <span class="flow-label">压缩机</span>
                        <span class="flow-label">冷水机</span>
                        <span class="flow-label">卸载阀 PV103</span>
                        <span class="flow-label">放散</span>
                        <span class="flow-label">出口阀PV102</span>
                        <span class="flow-label">氢气</span>
                    </div>

                    <div>
                        <!--18-->
                        <span class="flow-value">入口压力<br/>{{ valveState[16443] | formatFlowValue }} MPa</span>

                        <span class="flow-value">
                            隔膜检测压力
                            <!--19-->
                            <span class="item-value">{{ valveState[16444] | formatFlowValue }}</span>
                            MPa
                        </span>

                        <!--20-->
                        <span class="flow-value is_right">曲轴箱油温 {{ valveState[16445] | formatFlowValue }} °C</span>

                        <!--21-->
                        <span class="flow-value is_left">排水油温 {{ valveState[16442] | formatFlowValue }} °C</span>

                        <!--22-->
                        <span class="flow-value">出口温度（冷却前）<br/>{{ valveState[16443] | formatFlowValue }} °C</span>

                        <!--23-->
                        <span class="flow-value">排气压力<br/>{{ valveState[16444] | formatFlowValue }} MPa</span>

                        <!--24-->
                        <span class="flow-value">排气温度<br/>{{ valveState[16445] | formatFlowValue }} °C</span>

                    </div>

                    <div>
                        <!--冲压线阀-->
                        <span :class="`flow-valve ${ valveState[2] ? 'is_close' : '' }`"></span>
                        <!--入口阀-->
                        <span :class="`flow-valve ${ valveState[1] ? 'is_close' : '' }`"></span>
                        <!--旁路阀-->
                        <span :class="`flow-valve ${ valveState[3] ? 'is_close' : '' }`"></span>
                        <!--卸载阀-->
                        <span :class="`flow-valve ${ valveState[4] ? 'is_close' : '' }`"></span>
                        <!--25-出口阀-->
                        <span :class="`flow-valve ${ valveState[5] ? 'is_close' : '' }`"></span>
                    </div>

                    <div>
                        <div class="flow-status-box">
                            <!--26-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[6] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">冷水机组启动信号</span>
                            </div>
                            <!--27-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[7] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">冷水机组故障信号</span>
                            </div>
                        </div>
                        <div class="flow-status-box">
                            <!--28-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[1] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">曲轴箱底油压报警</span>
                            </div>
                            <!--29-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[2] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">压缩机入口压力低报警</span>
                            </div>
                            <!--30-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[3] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">曲轴箱油温低报警</span>
                            </div>
                            <!--31-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[4] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">曲轴箱液位低报警</span>
                            </div>
                            <!--32-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[5] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">水流量低报警</span>
                            </div>
                        </div>
                        <div class="flow-status-box">
                            <!--33-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[6] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">冷却水排气温度高报警</span>
                            </div>
                            <!--34-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[7] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">压缩机急停</span>
                            </div>
                            <!--35-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[3] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">压缩机排气压力高报警</span>
                            </div>
                            <!--36-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[4] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">压缩机排水温度高报警</span>
                            </div>
                            <!--37-->
                            <div class="flow-status">
                                <span :class="`flow-status-icon ${ valveState[5] ? 'is_alert' : '' }`"></span>
                                <span class="flow-status-value">冷却水流量低报警</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="chart-box">
                    <div class="chart-item" ref="lineChart1"></div>
                    <div class="chart-item" ref="lineChart2"></div>
                    <div class="chart-item" ref="lineChart3"></div>
                </div>
            </div>

            <ControlDialog ref="controlDialog"
                           :dialogTitle="dialogTitle"
            ></ControlDialog>
        </div>
    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                radio1: 0,
                value: '2.6',
                dialogTitle: '控制类弹窗',
                valveState: {},
            }
        },
        methods: {
            getData() {
                this.$api.queryTempquery(
                    [
                        {
                            target: 'h2-01',
                            address: [
                                16442,
                                16443,
                                16444,
                                16445,
                                16442,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                16445,
                                16443,
                                16444,
                                16445,
                                16442,
                                16443,
                                16444,
                                16445,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                7,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                7,
                                3,
                                4,
                                5,
                                27,
                                28,
                                29,
                                1000,
                                1001,
                            ],
                        },
                    ]
                ).then(( res )=> {
                    var obj = {};

                    for( var j=0; j<res.length; j++ ) {
                        var data = res[j].result || [];

                        for( var i=0; i<data.length; i++ ) {
                            obj[ data[i].address ] = data[i].value;
                        }
                    }

                    this.valveState = obj;
                })
            },

            /**
             * 获取折线图数据
             */
            getLineChartData() {
                var startDate = this.formatDate( 'YYYY-mm-dd', new Date() ) + ' 00:00:00';
                var endDate = this.formatDate( 'YYYY-mm-dd HH:MM:SS', new Date() );

                /*38 进气压力*/
                var api1 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_pv_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                /*38 排气压力*/
                var api2 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_utility_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                /*39 左杠排油压力*/
                var api3 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_pv_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                /*39 右杠排油压力*/
                var api4 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_utility_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                /*40 左杠排气压力*/
                var api5 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_pv_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                /*40 右杠排气压力*/
                var api6 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_utility_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                Promise.all( [api1,api2,api3,api4,api5,api6] ).then(( res )=> {
                    console.log('res==>',res);
                    var names = [];
                    var value = [[],[],[],[],[],[],];

                    for( var i=0; i<res.length; i++ ) {

                        for( var j=0; j<res[i].data.length; j++ ) {
                            if( i===0 ) {
                                names.push( this.formatDate( 'HH:MM', new Date( res[i].data[j][0] ) ) );
                            }

                            value[i].push( parseInt( res[i].data[j][1] ) )
                        }
                    }

                    this.chartLoad(
                        {
                            names: names,
                            value: [
                                value[0],
                                value[1],
                            ],
                            id: 'lineChart1',
                            legend: ['进气压力', '排气压力', ],
                            title: '压力（MPa）',
                        }
                    );


                    this.chartLoad(
                        {
                            names: names,
                            value: [
                                value[2],
                                value[3],
                            ],
                            id: 'lineChart2',
                            legend: ['左缸排油压力', '右缸排油压力', ],
                            title: '排油压力（MPa）',
                        }
                    );


                    this.chartLoad(
                        {
                            names: names,
                            value: [
                                value[4],
                                value[5],
                            ],
                            id: 'lineChart3',
                            legend: ['左缸排气温度', '右缸排气温度', ],
                            title: '排气温度（°C）',
                        }
                    );

                })
            },


            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '3%',
                        top: '10%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '28%',
                        right: '7%',
                        bottom: '3%',
                        left: '6%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '6%',
                        top: '10%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#35C759','#6EF690'],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#35C759',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(53,199,89,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(53,199,89,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#6EF690',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(110,246,144,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(110,246,144,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[1],
                        },
                    ],
                };

                chart.setOption( option );
            },

            btnClick() {
                this.$refs.controlDialog.dialogVisible = true;
            },
        },
        mounted() {
            this.getData();
            this.getLineChartData();
        }
    }
</script>

<style lang="less">
    .ysj_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            height: 1489px;
            background-image: url("../../assets/images/ysj/img_page.png");
            background-position: 10px 0px;
            background-repeat: no-repeat;
            padding-bottom: 28px;

            >.top-panel {
                width: 100%;
                height: 100px;
                background: #FFFFFF;
                border-radius: 8px;
                margin-bottom: 28px;
                padding: 20px 40px 20px 20px;
                box-sizing: border-box;

                >.el-radio-group {
                    width: 613px;
                    height: 60px;

                    >.el-radio-button {

                        .el-radio-button__inner {
                            width: 200px;
                            height: 60px;
                            line-height: 60px;
                            padding: 0;
                            font-size: 16px;
                        }

                        &:first-child {

                            .el-radio-button__inner {
                                border-radius: 8px 0 0 8px;
                            }
                        }

                        &:last-child {

                            .el-radio-button__inner {
                                border-radius: 0 8px 8px 0;
                            }
                        }
                    }
                }

                >.float-right {
                    line-height: 60px;

                    >span {
                        display: inline-block;
                        vertical-align: middle;
                    }

                    >.panel-sub-title {
                        font-size: 24px;
                        font-weight: 600;
                        color: #0E1526;
                    }

                    >.panel-num {
                        min-width: 80px;
                        height: 50px;
                        line-height: 48px;
                        background: #F9FAFE;
                        border-radius: 6px;
                        border: 1px solid #EEEFF2;
                        padding: 0 25px;
                        text-align: center;
                        box-sizing: border-box;
                        font-size: 28px;
                        font-weight: 600;
                        color: #2C50EE;
                        margin: 0 8px 0 30px;
                    }

                    >.panel-text {
                        font-size: 20px;
                        color: #0E1526;
                    }
                }
            }

            >.middle-panel {
                width: 100%;
                height: 280px;
                margin-bottom: 28px;

                >.panel-item {
                    display: inline-block;
                    vertical-align: top;
                    width: 360px;
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 8px;
                    margin-right: 28px;
                    padding: 40px;
                    box-sizing: border-box;

                    &:nth-of-type( 1 ) {

                        .panel-content {
                            padding-top: 35px;
                        }

                        .list-item {
                            display: inline-block;
                            vertical-align: top;
                            width: 50%;
                            line-height: 30px;
                            margin-bottom: 26px;

                            >.list-item-label {
                                display: inline-block;
                                width: 70px;
                                vertical-align: top;
                                font-size: 14px;
                                color: #0E1526;
                            }

                            >.list-item-num {
                                display: inline-block;
                                vertical-align: top;
                                font-size: 20px;
                                color: #0E1526;
                                font-weight: 600;
                            }
                        }
                    }

                    &:nth-of-type( 2 ) {
                        width: 500px;

                        .panel-content {
                            padding-top: 38px;

                            >.btn-item {
                                display: inline-block;
                                vertical-align: top;
                                width: 180px;
                                height: 50px;
                                line-height: 48px;
                                background: #FFFFFF;
                                border-radius: 6px;
                                border: 1px solid #CFD1D8;
                                box-sizing: border-box;
                                margin-right: 40px;
                                margin-left: 10px;
                                text-align: center;
                                margin-bottom: 32px;

                                .btn-item-txt {
                                    display: inline-block;
                                    vertical-align: middle;
                                    font-size: 14px;
                                    color: #0E1526;
                                }

                                .btn-item-icon {
                                    display: inline-block;
                                    vertical-align: middle;
                                    width: 24px;
                                    height: 24px;
                                    background-image: url("../../assets/images/jqj/icon_circle.png");
                                    background-size: 100% 100%;
                                    margin-left: 8px;

                                    &.is_red {
                                        background-image: url("../../assets/images/jqj/icon_circle_red.png");
                                    }
                                }

                                &:nth-of-type( 2n ) {
                                    margin-right: 0;
                                }
                            }
                        }

                    }

                    &:nth-of-type( 3 ) {
                        width: calc( 100% - 360px - 500px - 28px - 28px );
                        margin-right: 0;

                        .panel-content {
                            padding-top: 38px;

                            >.alert-box {
                                display: inline-block;
                                vertical-align: top;
                                width: 464px;

                                >.alert-item {
                                    line-height: 40px;
                                    width: calc( 100% / 3 );
                                    display: inline-block;
                                    vertical-align: top;
                                    font-size: 14px;
                                    color: #333333;
                                    padding-left: 8px;
                                    box-sizing: border-box;
                                    margin-bottom: 32px;

                                    .alert-item-icon {
                                        display: inline-block;
                                        vertical-align: middle;
                                        width: 28px;
                                        height: 28px;
                                        background-image: url("../../assets/images/jqj/icon_circle_1.png");
                                        background-size: 100% 100%;
                                        margin-left: 8px;

                                        &.is_red {
                                            background-image: url("../../assets/images/jqj/icon_circle_2.png");

                                        }
                                    }
                                }
                            }

                            >.btn-box {
                                display: inline-block;
                                vertical-align: top;
                                width: calc( 100% - 464px );

                                .el-button {
                                    width: 100px;
                                    padding-left: 0;
                                    padding-right: 0;
                                    margin-bottom: 32px;
                                }
                            }
                        }
                    }
                }
            }

            >.bottom-panel {
                width: 100%;
                height: 1060px;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px;
                box-sizing: border-box;
                text-align: center;

                >.flow-chart-box {
                    display: inline-block;
                    width: 1504px;
                    height: 600px;
                    position: relative;
                    background-image: url("../../assets/images/ysj/img_flow_chart.png");
                    background-repeat: no-repeat;
                    background-position: center -12px;

                    .flow-label {
                        font-size: 14px;
                        color: #535763;
                        position: absolute;

                        &:nth-of-type( 1 ) {
                            top: 251px;
                            left: 3px;
                        }

                        &:nth-of-type( 2 ) {
                            top: 55px;
                            left: 141px;
                        }

                        &:nth-of-type( 3 ) {
                            top: 191px;
                            left: 150px;
                        }

                        &:nth-of-type( 4 ) {
                            top: 55px;
                            left: 490px;
                        }

                        &:nth-of-type( 5 ) {
                            top: 307px;
                            left: 515px;
                        }

                        &:nth-of-type( 6 ) {
                            top: 550px;
                            left: 515px;
                        }

                        &:nth-of-type( 7 ) {
                            top: 55px;
                            left: 995px;
                        }

                        &:nth-of-type( 8 ) {
                            top: 26px;
                            left: 1292px;
                        }

                        &:nth-of-type( 9 ) {
                            top: 191px;
                            left: 1263px;
                        }

                        &:nth-of-type( 10 ) {
                            top: 251px;
                            left: 1469px;
                        }
                    }

                    .flow-value {
                        color: #333333;
                        font-size: 14px;
                        position: absolute;
                        padding: 8px 10px;
                        box-sizing: border-box;
                        min-width: 80px;
                        line-height: 32px;
                        background-color: rgba(249, 250, 254, 0.8);
                        border-radius: 4px;
                        border: 1px solid #dddddd;
                        text-align: center;

                        &:after {
                            content: ' ';
                            position: absolute;
                            bottom: -8px;
                            left: 0;
                            right: 0;
                            margin: auto;
                            width: 0;
                            height: 0;
                            border-left: 5px solid transparent;
                            border-right: 5px solid transparent;
                            border-top: 8px solid #F9FAFE;
                        }

                        &:before {
                            content: ' ';
                            position: absolute;
                            bottom: -10px;
                            left: 0;
                            right: 0;
                            margin: auto;
                            width: 0;
                            height: 0;
                            border-left: 6px solid transparent;
                            border-right: 6px solid transparent;
                            border-top: 10px solid #dddddd;
                        }

                        &.is_left {

                            &:after {
                                bottom: 0;
                                top: 0;
                                right: unset;
                                left: -8px;
                                border-top: 5px solid transparent;
                                border-bottom: 5px solid transparent;
                                border-right: 8px solid #F9FAFE;
                                border-left: unset;
                            }

                            &:before {
                                bottom: 0;
                                top: 0;
                                right: unset;
                                left: -10px;
                                border-top: 5px solid transparent;
                                border-bottom: 5px solid transparent;
                                border-right: 10px solid #dddddd;
                                border-left: unset;
                            }
                        }

                        &.is_right {

                            &:after {
                                bottom: 0;
                                top: 0;
                                left: unset;
                                right: -8px;
                                border-top: 5px solid transparent;
                                border-bottom: 5px solid transparent;
                                border-left: 8px solid #F9FAFE;
                                border-right: unset;
                            }

                            &:before {
                                bottom: 0;
                                top: 0;
                                left: unset;
                                right: -10px;
                                border-top: 5px solid transparent;
                                border-bottom: 5px solid transparent;
                                border-left: 10px solid #dddddd;
                                border-right: unset;
                            }
                        }

                        .item-value {
                            display: inline-block;
                            width: 60px;
                            height: 32px;
                            /*margin: 0 5px;*/
                            vertical-align: top;
                            line-height: 32px;
                            background: #ffffff;
                            border-radius: 4px;
                            border: 1px solid #EEEFF2;
                            color: #35C759;
                            font-weight: 600;
                        }

                        .el-input {
                            width: 60px;
                            height: 32px;
                            /*margin: 0 5px;*/
                            vertical-align: top;

                            .el-input__inner {
                                height: 32px;
                                line-height: 32px;
                                background: #ffffff;
                                border-radius: 4px;
                                border: 1px solid #EEEFF2;
                                color: #35C759;
                                font-weight: 600;
                            }
                        }

                        &:nth-of-type( 1 ) {
                            top: 163px;
                            left: 20px;
                            line-height: 18px;
                        }

                        &:nth-of-type( 2 ) {
                            top: 104px;
                            left: 435px;
                            background-color: #ffffff;
                        }

                        &:nth-of-type( 3 ) {
                            top: 343px;
                            left: 323px;
                        }

                        &:nth-of-type( 4 ) {
                            top: 343px;
                            left: 606px;
                        }

                        &:nth-of-type( 5 ) {
                            top: 159px;
                            left: 809px;
                            line-height: 18px;
                        }

                        &:nth-of-type( 6 ) {
                            top: 159px;
                            left: 997px;
                            line-height: 18px;
                        }

                        &:nth-of-type( 7 ) {
                            top: 159px;
                            left: 1118px;
                            line-height: 18px;
                        }


                        /*&:nth-of-type( 4 ) {*/
                        /*    top: 282px;*/
                        /*    left: 77px;*/
                        /*    line-height: 18px;*/
                        /*}*/



                    }

                    .flow-valve {
                        position: absolute;
                        width: 24px;
                        height: 22px;
                        background-image: url("../../assets/images/ysj/icon_valve_open.png");
                        background-size: 100% 100%;

                        &.is_close {
                            background-image: url("../../assets/images/ysj/icon_valve_close.png");
                        }

                        &:nth-of-type( 1 ) {
                            top: 20px;
                            left: 184px;
                        }

                        &:nth-of-type( 2 ) {
                            top: 222px;
                            left: 184px;
                        }

                        &:nth-of-type( 3 ) {
                            top: 20px;
                            left: 521px;
                        }

                        &:nth-of-type( 4 ) {
                            top: 20px;
                            left: 1026px;
                        }

                        &:nth-of-type( 5 ) {
                            top: 222px;
                            left: 1294px;
                        }
                    }

                    .flow-status-box {
                        position: absolute;
                        text-align: left;

                        >.flow-status {
                            margin-bottom: 16px;

                            >.flow-status-icon {
                                display: inline-block;
                                vertical-align: top;
                                width: 28px;
                                height: 28px;
                                background-image: url("../../assets/images/ysj/icon_status_normal.png");
                                background-size: 100% 100%;

                                &.is_alert {
                                    background-image: url("../../assets/images/ysj/icon_status_alert.png");
                                }
                            }

                            >.flow-status-value {
                                line-height: 28px;
                                font-size: 14px;
                                color: #535763;
                                margin-left: 10px;
                            }
                        }

                        &:nth-of-type( 1 ) {
                            top: 433px;
                            left: 219px;
                        }

                        &:nth-of-type( 2 ) {
                            top: 337px;
                            left: 909px;
                        }

                        &:nth-of-type( 3 ) {
                            top: 337px;
                            left: 1209px;
                        }
                    }
                }

                >.chart-box {
                    width: 100%;
                    height: calc( 100% - 600px );
                    text-align: left;

                    >.chart-item {
                        display: inline-block;
                        vertical-align: top;
                        width: calc( 100% / 3 );
                        height: 100%;
                    }
                }
            }
        }
    }
</style>
